<template>
    <div>
        <div style="margin:50px">
            <Row :gutter="16">
                <i-col span="8"> </i-col>
                <i-col span="8">
                    <Button type="info" @click="addBtn()">添加队列</Button>
                </i-col>
                <i-col span="8"> </i-col>
            </Row>
        </div>
        <h1 style="margin:10px;">队列内容</h1>
        <Row :gutter="16">
            <i-col span="12"></i-col>
            <i-col span="12">
                <Table  :columns="columns"
                        :data="list"
                        no-userFrom-text="暂无数据">
                    <template slot-scope="{ row,index}" slot="id">
                        <span>{{index+1}}</span>
                    </template>
                    <template slot-scope="{row}" slot="name">'
                        <span>{{row.name}}</span>
                    </template>
                    <template slot-scope="{row}" slot="status">
                        <span>{{row.status==1 ?'队列未执行':'队列执行'}}</span>
                    </template>
                </Table>
            </i-col>
        </Row>
    </div>    
</template>

<script>
    import { getQueue,addQueue} from '@/api/jobs';
    export default {
        data () {
            return {
                columns: [
                    {
                        title: '序号',
                        slot: 'id',
                        width: 200
                    },
                    {
                        title: '时间',
                        key: 'name',
                        minWidth: 200
                    },
                    {
                        title: '状态',
                        slot: 'status',
                        minWidth: 200,
                    },
                ],
                list:[],
                
            }
        },
        created () {
            this.getlist();
        },
        mounted () {
            let _this = this;
            setInterval(function(){
                _this.getlist();
            }, 3000);
        },
        methods: {
            addBtn () {
                addQueue().then(async res => {
                    this.$Message.success(res.msg);
                    this.getlist();
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            },
            getlist () {
                getQueue().then(async res => {
                    this.list = res.data.list;
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            }
        }
    }
</script>
<style  scoped>
    
</style>